<template>
  <div class="payment-result-container">
    <el-card class="result-card">
      <div class="result-icon pending">
        <el-icon><Loading /></el-icon>
      </div>
      <h2>支付处理中</h2>
      <p class="message">您的支付正在处理中，请稍候...</p>
      
      <div class="order-info">
        <p>订单号：{{ payment.orderId }}</p>
        <p>支付时间：{{ formatDate(payment.createdAt) }}</p>
      </div>
      
      <div class="progress">
        <el-progress :percentage="progress" :status="progressStatus" />
        <p class="progress-text">{{ progressText }}</p>
      </div>
      
      <div class="actions">
        <el-button type="primary" @click="checkPaymentStatus">刷新状态</el-button>
        <el-button @click="goToRecharge">返回充值</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { Loading } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getPaymentStatus } from '@/api/payment'

const route = useRoute()
const router = useRouter()
const payment = ref({
  orderId: route.query.orderId,
  createdAt: new Date()
})
const progress = ref(50)
const progressStatus = ref('')
const progressText = ref('正在等待支付结果')

// 检查支付状态
const checkPaymentStatus = async () => {
  try {
    const res = await getPaymentStatus(route.query.orderId)
    
    if (res.data.status === 'paid') {
      router.push(`/payment/success?orderId=${route.query.orderId}`)
    } else if (res.data.status === 'failed') {
      router.push(`/payment/failed?orderId=${route.query.orderId}`)
    } else {
      progress.value = 70
      progressText.value = '支付处理中，请稍候...'
    }
  } catch (error) {
    progressStatus.value = 'exception'
    progressText.value = '查询支付状态失败'
    console.error('查询支付状态失败:', error)
  }
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 跳转到充值页
const goToRecharge = () => {
  router.push('/recharge')
}

// 自动检查状态
onMounted(() => {
  if (route.query.orderId) {
    checkPaymentStatus()
    // 每5秒检查一次状态
    const timer = setInterval(checkPaymentStatus, 5000)
    return () => clearInterval(timer)
  }
})
</script>

<style scoped>
.payment-result-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.result-card {
  text-align: center;
  padding: 30px;
}

.result-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.result-icon.pending {
  color: var(--el-color-warning);
}

.message {
  font-size: 16px;
  color: var(--el-text-color-regular);
  margin: 20px 0;
}

.order-info {
  background-color: var(--el-bg-color-page);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
  text-align: left;
}

.order-info p {
  margin: 8px 0;
  color: var(--el-text-color-secondary);
}

.progress {
  margin: 30px 0;
}

.progress-text {
  margin-top: 10px;
  color: var(--el-text-color-secondary);
}

.actions {
  margin-top: 30px;
}
</style>